<route lang="json5">
  {
    style: {
      navigationStyle: 'custom',
    },
    anonymous: false
  }
</route>

<script lang="ts" setup>
import { useMessage } from 'wot-design-uni'
import StudentPicker from '@/components/StudentPicker.vue'
import { loginRoute } from '@/interceptors/route'
import { useAppStore, useUserStore } from '@/stores'
import getAvatar from '@/utils/avatar'
import { CouponPageType } from '@/enum'
import { UserCenterApi } from '@/apis'

const message = useMessage()
const userStore = useUserStore()
const { navAreaHeight } = useAppStore()
onShow(() => {
  if (!userStore.isLogin()) {
    uni.navigateTo({ url: loginRoute })
  }
})

const stuInfo = computed(() => userStore.currentStudent)
const avatarUrl = getAvatar(null, 1)
const recommender = ref(userStore?.userInfo?.recommender)

const gotoPage = (url: string) => {
  uni.navigateTo({
    url,
  })
}

const showTip = () => {
  uni.showToast({
    title: '暂不支持线上操作，请联系工作人员',
    icon: 'none',
  })
}

const onLogout = () => {
  userStore.logout()
}

const recommenderError = computed(() => {
  if (!recommender.value) {
    return '请输入手机号'
  }
  if (!/^1[3-9]\d{9}$/.test(recommender.value)) {
    return '请输入正确的手机号'
  }
  return null
})

const onSetRecommander = () => {
  if (userStore?.userInfo?.recommender) {
    return
  }
  message
    .confirm({
      title: '设置推荐人',
      beforeConfirm: async ({ resolve }) => {
        if (!recommenderError.value) {
          resolve(false)
        }
        const req = {
          recommenderPhone: recommender.value,
        }
        try {
          await UserCenterApi.setRecommender(req)
          userStore.refreshUserInfo()
          resolve(true)
        } catch {
          resolve(false)
        }
      },
    })
    .then(() => {
      // message.alert(`设置成功`)
    })
    .catch((error) => {
      console.log(error)
    })
}
</script>

<template>
  <image class="background" mode="widthFix" src="/static/images/banner-bg.png" :draggable="false" />
  <view class="relative px tab-page pb-safe">
    <view class="w-full" :style="{ height: `${navAreaHeight + 12}px` }" />
    <view class="h-136rpx flex-row-between-center">
      <image mode="scaleToFill" :src="avatarUrl" class="size-136rpx" :draggable="false" />
      <view class="ml-16px h-full flex-col-center-start flex-1 px-20rpx">
        <text class="text-18px fw-500 line-height-25px">
          {{ stuInfo.name }}
        </text>
        <view class="mt-4px text-13px line-height-18px">
          <text class="text-gray-4">
            入学年份：{{ userStore.currentStudent.admissionYear || '未知' }}
          </text>
        </view>
      </view>
      <view v-if="userStore.studentList.length > 1" class="">
        <StudentPicker />
      </view>
    </view>
    <!-- 上课统计 -->
    <!-- 操作列表 -->
    <view class="my flex-row-between-center rounded-8px bg-white px-4xl py-sm">
      <view class="flex-col-start-center" @click="gotoPage('/pages/class/change/class')">
        <image src="/static/icons/icon-change-class.svg" class="mb-4px size-48rpx" />
        <text class="text-14px">
          转班
        </text>
      </view>
      <view class="flex-col-start-center" @click="gotoPage('/pages/class/change/lesson')">
        <image src="/static/icons/icon-change-lesson.svg" class="mb-4px size-48rpx" />
        <text class="text-14px">
          调课
        </text>
      </view>
      <view class="flex-col-start-center" @click="showTip">
        <image src="/static/icons/icon-cancel-class.svg" class="mb-4px size-48rpx" />
        <text class="text-14px">
          退班
        </text>
      </view>
      <view class="flex-col-start-center" @click="showTip">
        <image src="/static/icons/icon-cancel-lesson.svg" class="mb-4px size-48rpx" />
        <text class="text-14px">
          退课
        </text>
      </view>
    </view>
    <!-- 数据查询 -->
    <view class="my flex-row-between-center rounded-8px bg-white px py">
      <view class="fun-item flex-col-start-center" @click="gotoPage('/pages/class/list')">
        <image src="/static/icons/icon-my-class.svg" class="fun-icon" />
        <text class="fun-text">
          我的班级
        </text>
      </view>
      <view class="fun-item flex-col-start-center" @click="gotoPage('/pages/class/change/list')">
        <image src="/static/icons/icon-schedule.svg" class="fun-icon" />
        <text class="fun-text">
          调转记录
        </text>
      </view>
      <view class="fun-item flex-col-start-center" @click="gotoPage('/pages/order/list')">
        <image src="/static/icons/icon-my-order.svg" class="fun-icon" />
        <text class="fun-text">
          我的订单
        </text>
      </view>
      <view class="fun-item flex-col-start-center" @click="gotoPage('/pages/refund/list')">
        <image src="/static/icons/icon-my-refund.svg" class="fun-icon" />
        <text class="fun-text">
          退课订单
        </text>
      </view>
      <view class="fun-item flex-col-start-center" @click="gotoPage('/pages/exam/list')">
        <image src="/static/icons/icon-my-exam.svg" class="fun-icon" />
        <text class="fun-text">
          考试成绩
        </text>
      </view>
    </view>

    <view class="section">
      系统功能
    </view>
    <view class="my rounded-8px bg-white px">
      <view
        class="cell flex-row-between-center"
        @click="onSetRecommander"
      >
        <view class="flex-row-start-center">
          <wd-icon name="user" size="20px" />
          <!-- <i class="iconfont iconfont-coupon text-gray-5 !text-20px" /> -->
          <text class="ml-8px">
            我的推荐人
          </text>
        </view>
        <text v-if="userStore?.userInfo?.recommender" class="mr-8px text-16px text-gray-4 leading-24px">
          {{ userStore.userInfo.recommender }}
        </text>
        <i v-else class="iconfont iconfont-arrow-right text-gray-5 !text-20px" />
      </view>
      <view
        class="cell flex-row-between-center"
        @click="gotoPage(`/pages/shop/coupon/index?type=${CouponPageType.view}`)"
      >
        <view class="flex-row-start-center">
          <i class="iconfont iconfont-coupon text-gray-8 !text-20px" />
          <text class="ml-8px">
            我的优惠券
          </text>
        </view>
        <i class="iconfont iconfont-arrow-right text-gray-5 !text-20px" />
      </view>
      <!-- <view class="cell flex-row-between-center">
        <view class="flex-row-start-center">
          <i class="iconfont iconfont-wechat text-gray-5 !text-20px" />
          <text class="ml-8px">
            绑定微信
          </text>
        </view>
      </view> -->
      <view class="cell flex-row-between-center" @click="onLogout">
        <view class="flex-row-start-center">
          <i class="iconfont iconfont-logout text-gray-8 !text-20px" />
          <text class="ml-8px">
            退出账号
          </text>
        </view>
        <i class="iconfont iconfont-arrow-right text-gray-5 !text-20px" />
      </view>
    </view>
    <wd-message-box>
      <wd-input v-model="recommender" type="number" size="large" placeholder="请输入推荐人手机号" />
      <!-- 错误提示 -->
      <view v-if="recommenderError" class="input-error">
        {{ recommenderError }}
      </view>
    </wd-message-box>
  </view>
</template>

<style lang="scss" scoped>
  .background {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 0;
    height: 564rpx;
  }

  .fun-item {}

  .fun-icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
    width: 72rpx;
    height: 72rpx;
  }

  .fun-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    color: #1D2129;
  }

  .btn-secondary {
    color: $uni-color-primary;
    border: 1px solid $uni-color-primary;
  }

  .cell {
    height: 108rpx;
  }

  .cell:not(:last-child) {
    border-bottom: 1px solid #E5E6EB;
  }

  .input-error {
    min-height: 18px;
    margin-top: 2px;
    color: var(--wot-color-danger, #fa4350);
    text-align: left;
  }
</style>
